<template>
  <div>
    <el-row class="warp">
      <el-col :span="24" class="warp-breadcrum">
        <el-breadcrumb separator="/" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }"><b>系统管理</b></el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>

      <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
        <!--工具条-->
        <el-col :span="24" class="toolbar">
          <el-form :inline="true" :model="filters">
            <el-form-item>
              <el-input v-model="filters.name" placeholder="用户名/姓名/昵称" style="min-width: 240px;"
                        @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="openUserDialog()">新增</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <!--列表-->
        <el-table  stripe :data="users" highlight-current-row v-loading="loading" style="width: 100%;">
          <el-table-column type="index" width="60">
          </el-table-column>
          <el-table-column prop="realName" label="姓名" sortable>
          </el-table-column>
          <el-table-column prop="loginName" label="登录名" sortable>
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
          </el-table-column>
          <el-table-column prop="email" label="邮箱" min-width="160" sortable>
          </el-table-column>
          <el-table-column prop="mobile" label="电话" sortable>
          </el-table-column>
          <el-table-column prop="remark" label="备注" width="100">
          </el-table-column>
          <el-table-column property="operate" label="操作" width="150">
            <template scope="scope">
              <el-button
                size="mini" type="primary" @click="openEditUserDialog(scope.row)">编辑
              </el-button>
              <el-button
                size="mini"
                type="danger" @click="delUser(scope.row.id)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog :title="userDialog.title" :visible.sync="userDialog.isShow" width="450px" :close-on-click-modal="false" @close="closeUserDialogFn"
               :modal="true">
      <el-form :model="userForm" :rules="rules" ref="userForm">
        <el-form-item prop="loginName" label="登录名" label-width="80px">
          <el-input size="medium" :readonly="readOnly" placeholder="请输入登录名" v-model="userForm.loginName" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item  prop="realName" label="昵称" label-width="80px" >
          <el-input size="medium" placeholder="请输入昵称" v-model="userForm.realName" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item prop="sex" label="性别" label-width="80px">
          <el-select clearable v-model="userForm.sex" placeholder="请选择">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机" prop="mobile" label-width="80px" >
          <el-input size="medium" :readonly="readOnly" placeholder="请输入手机号" v-model="userForm.mobile" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" label-width="80px" >
          <el-input size="medium" placeholder="请输入邮箱" v-model="userForm.email" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="type" label-width="80px" >
          <el-select clearable v-model="userForm.type" placeholder="请选择">
            <el-option label="客户经理" :value="3"></el-option>
            <el-option label="律师" :value="1"></el-option>
            <el-option label="机构用户" :disabled="true"  :value="2"></el-option>
            <el-option label="管理员" :disabled="true" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="remark" label="备注" label-width="80px" >
          <el-input size="medium" placeholder="请输入备注" v-model="userForm.remark" style="width: 217px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="default" @click="closeDialogFn(userDialog.isShow = false)">取消</el-button>
        <el-button size="medium" type="primary" @click="submitUserForm('userForm')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import userAPI from '../../api/api_user';
  import valid from '@/utils/valid.js'
  export default {
    data() {
      return {
        readOnly: false,
        filters: {
          name: ''
        },
        userDialog: {
          isShow: false,
          title: '用户新增'
        },
        userForm: {
          loginName: '',
          realName: '',
          id: -1,
          sex: '0',
          email: '',
          mobile: '',
          remark: '',
          type: 2
        },
        resetUserForm: {
          loginName: '',
          realName: '',
          id: -1,
          sex: '0',
          email: '',
          mobile: '',
          remark: '',
          type: 2
        },
        rules: {
          loginName: [{required: true, message: '请输入登录名', trigger: ['blur', 'change']}],
          email: [{type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}],
          mobile: [
            {required: true, message: '请输入手机', trigger: 'blur'},
            {validator: valid.isMobile, trigger: 'blur'}
          ]
        },
        loading: false,
        users: [],
        total: 0,
        page: 1,
        limit: 10,
        loading: false
      }
    },
    methods: {
      //性别显示转换
      formatSex: function (row, column) {
        return row.sex == '1' ? '男' : row.sex == '0' ? '女' : '未知';
      },
      handleCurrentChange(val) {
        this.page = val;
        this.search();
      },
      closeDialogFn() {
        this.userDialog.isShow = false
      },
      submitUserForm(formName) {
        let _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            userAPI.addUser(this.userForm).then(result => {
              if(result.code === '0000'){
                _this.$message({
                  message: result.message,
                  type: 'success'
                })
                _this.handleSearch()
                _this.userDialog.isShow = false
              } else {
                _this.$message({
                  message: result.message,
                  type: 'error'
                })
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      openEditUserDialog (row) {
        this.readOnly = true
        this.userDialog.isShow = true
        this.userDialog.title = '编辑用户'
        Object.assign(this.userForm, row)
      },
      delUser (id) {
        let _this = this
        this.$confirm('此操作将删除用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          userAPI.delUser({'id': id}).then(result => {
            _this.$message({
              message: result.message,
              type: 'success'
            })
            _this.handleSearch()
          })
        }).catch(() => {
        })
      },
      openUserDialog () {
        this.userDialog.isShow = true
        this.userDialog.title = '新增用户'
        this.userForm.id = -1
        this.readOnly = false
      },
      closeUserDialogFn () {
        this.$refs['userForm'].resetFields()
        Object.assign(this.userForm, this.resetUserForm)
      },
      handleSearch() {
        this.total = 0;
        this.page = 1;
        this.search();
      },
      //获取用户列表
      search: function () {
        let that = this;
        let params = {
          page: that.page,
          limit: 10,
          name: that.filters.name
        };

        that.loading = true;
        userAPI.findList(params).then(function (result) {
          that.loading = false;
          if (result) {
            that.total = 10;
            that.users = result.data;
          }
        }, function (err) {
          that.loading = false;
          that.$message.error({showClose: true, message: err.toString(), duration: 2000});
        }).catch(function (error) {
          that.loading = false;
          that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
        });
      }
    },
    mounted() {
      this.handleSearch()
    },
    computed: {
      roleList() {
        return this.$store.state.baseInfo.roleList
      }
    }
  }
</script>

<style scoped>

</style>
